<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
<div id="root">
    <h1>渲染也页面的数据：{{age}}</h1>

    <button type="button" v-on:click="add()">Age++</button></br>

    <button @click="bye">销毁Vue</button>

    <h2>Vue中的生命周期函数</h2>
    <p v-for="i in LIFECYCLE_HOOKS">{{i}}</p>
</div>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            age: 1,
            LIFECYCLE_HOOKS: [
                'beforeCreate',
                'created',
                'beforeMount',
                'mounted',
                'beforeUpdate',
                'updated',
                'beforeDestroy',
                'destroyed',
                'activated',
                'deactivated',
                'errorCaptured',
                'serverPrefetch',
                'renderTracked',
                'renderTriggered'
            ]
        },
        methods: {
            add() {
                this.age++
            },
            bye() {
                this.$destroy()
            },
        },
        beforeCreate() {
            console.log('beforeCreate, 此阶段初始化生命周期和事件,数据代理还并没有开始，没有data，页面不渲染');
            console.log(this);
            debugger;
        },
        created() {
            console.log('create, 在beforeCreate之后，还是处于一个初始化阶段，初始化这个数据监测和数据代理的，可以看到data数据，页面不渲染');
            console.log(this);
            debugger;
        },
        beforeMount() {
            console.log('beforeMount, dom元素Vue已经解析完成的真实DOM，但是此时的vue还没来的及将这些DOM向页面中存放');
            console.log(this);
            debugger;
        },
        mounted() {
            console.log('mounted, 经过这个 beforeMount 的阶段之后，Vue会将el中的数据存放在 $el 上，类似于做一个副本,将真实的DOM插入页面之后，Vue就会开始调用这个 mounted 挂载的这个函数了，页面数据被渲染');
            console.log('在这个挂载函数中，一般会进行这些操作：开启定时器，发送网络请求，订阅消息，绑定自定义事件等操作');
            console.log(this);
            debugger;
        },
        beforeUpdate() {
            console.log('beforeUpdate, vue中data数据发生改变，还未修改页面数据');
            console.log(this);
            debugger;
        },
        updated() {
            console.log('updated, vue中data数据发生改变，页面数据被修改');
            console.log(this);
            debugger;
        },
        beforeDestroy() {
            console.log('beforeDestroy, 销毁需要调用这个 this.$destroy() 方法来实现, 在销毁 beforeDestry 的这个函数中，销毁的实例中的所有的data，methods还有指令等等都是处于可用状态，但是不能对实例中的具体的数据和方法进行一个操作');
            console.log(this);
            debugger;
        },
        destroyed() {
            console.log('destroyed, vue被销毁，页面数据还在，但是不能操作');
            debugger;
        },


    });
</script>

</body>
</html>
